<template>
  <view class="bind_card">
    <intake-nav-bar title="绑定水卡" dark :fixed="true" />
    <view class="_bind_card">
      <view class="input-area">
        <input class="input" v-model="phoneNumber" placeholder="请输入需要绑定的卡号" placeholder-style="color: #999999;"
          type="number" maxlength="11" />
        <view class="scanIcon" @click="scanCode">
          <image :src="scanIcon"></image>
          <view class="scan_text">扫码绑卡</view>
        </view>
      </view>

      <view class="submit-area">
        <button class="submit-btn" type="primary" @click="handleSubmit">提交</button>
      </view>

    </view>
  </view>
</template>

<script>
import {
  bindCard
} from '@/api/water';
export default {
  data() {
    return {
      CardList: [],
      phoneNumber: '',
      code: '',
      barcodeData:'',
      scanIcon: this.$common.imgUrl() + '/images/home/scan_ico@2x.png',
    };
  },
  created() {
  },
  methods: {
    scanCode() {
      uni.scanCode({
        success: (res) => {
          const barcode = res.result.split("?n=")[1];
          // 将扫描到的条形码赋值给页面的某个变量
          this.phoneNumber = barcode;
          // 你可以在这里处理扫描到的条形码数据，比如显示在页面上或者发送到服务器
          uni.showToast({
            title: '扫描成功: ' + barcode,
            icon: 'none'
          });
        },
        fail: (err) => {
          // 扫描失败
          console.error('扫描失败:', err);
          uni.showToast({
            title: '扫描失败',
            icon: 'none'
          });
        }
      });
    },
    handleSubmit() {
      bindCard({
        card_no:this.phoneNumber
      })
        .then(res => {
          uni.showToast({
            title: res.message,
            icon: 'none'
          });
          if (res.status === 0) {
            uni.reLaunch({
                url: '/pages/index/home'
            });
          } else {
            console.log("授权失败");
          }
        })
        .catch(res => { 
        });
    }
  },

}
</script>

<style lang="scss" scoped>
.bind_card {
  background: url($baseUrl + '/images/bg/user_bg@2x.png') no-repeat center / 100% 100%;
  width: 100%;
  height: 100vh;
  /* 使用视口高度，确保元素高度充满整个屏幕 */
  // display: flex;
  // justify-content: center;
  // background-size: cover; /* 使背景图片覆盖整个元素 */
  padding: 0 30rpx;

  .input-area {
    width: 690rpx;
    height: 120rpx;
    background-color: #fff;
    border-radius: 4px;
    margin: 28rpx 0;

    & .input {
      float: left;
      width: 456rpx;
      height: 100%;
      font-size: 29rpx;
      color: #838383;
      margin: 0 35rpx;
      line-height: 100rpx;
    }

    & .scanIcon {
      width: 150rpx;
      height: 120rpx;
      float: left;
      text-align: center;
      padding: 16rpx 0;

      image {
        width: 58rpx;
        height: 57rpx;
      }

      .scan_text {
        width: 100%;
        transform: scale(55%);
      }
    }
  }
}
</style>
